<template>
  <div>
    <div id="chartLine" style="width: 100%;height: 300px;"></div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="float:left;">按日统计</span>
        <el-button
          style="float:right;"
          type="success"
          size="mini"
          @click="exportData"
          icon="el-icon-download"
        >导出数据</el-button>
      </div>
      <div class="text item">
        <el-form inline :model="pagination">
          <el-form-item label="选择时间:">
            <el-date-picker
              v-model="datearray"
              value-format="yyyy-MM-dd"
              size="mini"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="datechange"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card">
      <div style="height:500px;" class="text item">
        <el-table
          ref="singleTable"
          :data="monthlist"
          highlight-current-row
          max-height="500px"
          style="width: 100%"
        >
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column property="months" label="日期" width="120"></el-table-column>
          <el-table-column property="salePrice" label="销售金额" show-overflow-tooltip></el-table-column>
          <el-table-column property="cost" label="成本金额" width="120"></el-table-column>
          <el-table-column property="profit" label="盈利金额" width="120"></el-table-column>
        </el-table>
      </div>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      monthlist: [],
      datearray: [],
      pagination: {}
    };
  },
  mounted() {
    this.getGoodsList(1, 10);
  },
  methods: {
    exportData() {
      var url =
        this.requestUrl +
        "statistical/statistical/tStatement/downmonthexcel?pageNum={pageNum}&pageSize={pageSize}&access_token={token}";
      url = url.replace("{pageNum}", this.pagination.pageNum);
      url = url.replace("{pageSize}", this.pagination.pageSize);
      url = url.replace("{token}", localStorage.getItem("access_token"));
      console.log("url:----------------------", url);
      window.open(url, "_parent");
    },
    datechange() {
      this.pagination.datesStart = this.datearray[0];
      this.pagination.datesEnd = this.datearray[1];
      this.getGoodsList(1, 10);
    },
    getGoodsList(pageNum, pageSize) {
      this.pagination.access_token = localStorage.getItem("access_token");
      this.pagination.pageNum = pageNum;
      this.pagination.pageSize = pageSize;
      this.axios({
        method: "get",
        url: this.requestUrl + "statistical/statistical/tStatement/monthlist",
        params: this.pagination
      }).then(res => {
        console.log("获取的商品信息", res.data.obj);
        this.monthlist = res.data.obj.list;
        this.pagination.total = res.data.obj.total;
        let months = [];
        let profits = [];
        for (var i in this.monthlist) {
          months.push(this.monthlist[i].months);
          profits.push(this.monthlist[i].profit);
        }
        const echarts = require("echarts");
        let myChart = echarts.init(document.getElementById("chartLine"));
        myChart.setOption({
          title: {
            text: "月盈利统计",
            x: "center"
          },
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["盈利"],
            x: "right"
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: months
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              name: "销量",
              type: "line",
              connectNulls: true, 
              // 设置折线图颜色
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#4876FF"
                  }
                }
              },
              stack: "盈利",
              data: profits
            }
          ]
        });
      });
    },
    handleCurrentChange(val) {
      this.getGoodsList(val, this.pagination.pageSize);
    },
    handleSizeChange(val) {
      this.getGoodsList(this.pagination.pageNum, val);
    }
  }
};
</script>
<style scoped>
.el-form-item {
  float: left;
}
</style>